<!--  -->
<template>
<!-- TODO：应该是没用了，后续确认清楚删掉~ -->
  <base-modal
    title="设置常用搜索字段"
    :show.sync="visible"
    width="886px"
    class="batch-editing-customer-dialog"
  >
    <div class="task-search-content">
      <!-- 搜索 -->
      <div class="task-search-seo task-flex task-ai">
        <div class="task-search-input">
          <!-- <el-input placeholder="请输入字段名称" v-model="seoText" class="input-with-select" @keyup.enter.native="taskSearch">
            <el-button slot="append" icon="el-icon-search" @click="taskSearch"></el-button>
          </el-input> -->
        </div>
        <!-- <base-button type="ghost" class="task-ml12" @event="reset">
          重置
        </base-button> -->
      </div>
      <!-- 系统字段 -->
      <el-checkbox
        :indeterminate="checkSystemList.length && !sysCheckAll ? true : false"
        v-model="sysCheckAll"
      ><h3 class="task-mtb13">系统字段</h3></el-checkbox
      >
      <el-checkbox-group v-model="checkSystemList">
        <el-checkbox
          :label="item.fieldName"
          v-for="(item, index) in systemList"
          :key="index"
          class="wh150"
        >{{ item.displayName }}</el-checkbox
        >
      </el-checkbox-group>
      <!-- 自定义字段 -->
      <el-checkbox
        :indeterminate="
          checkCustomizeList.length && !sysCheckAll ? true : false
        "
        v-model="cusCheckAll"
        v-if="customizeList.length"
      ><h3 class="task-mtb13">自定义字段</h3></el-checkbox
      >
      <el-checkbox-group v-model="checkCustomizeList">
        <template v-for="(item, index) in customizeList">
          <el-checkbox
            :label="item.fieldName"
            :key="index"
            class="wh150"
            v-if="item.isSearch"
          >{{ item.displayName }}</el-checkbox
          >
        </template>
      </el-checkbox-group>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="onSubmit">确 定</el-button>
    </div>
  </base-modal>
</template>

<script>
import { storageGet, storageSet } from "@src/util/storage";
import {PRODUCT_SEARCH_MODAL_COM_DATA} from "@src/modules/productV2/storage"
import { string } from "mathjs";
import _ from 'lodash'
let checkSystemList_ = [];
let checkCustomizeList_ = [];
export default {
  name: "search-set-modal",
  props: {
    fields: {
      type: Array | string,
    },
  },
  computed: {
    systemList() {
      return this.fields.filter((item) => item.isSystem == 1);
    },
    customizeList() {
      return this.fields.filter((item) => item.isSystem == 0);
    },
    sysCheckAll: {
      get() {
        return this.checkSystemList.length == this.systemList.length;
      },
      set(v) {
        this.checkSystemList = v
          ? this.systemList.map((item) => {
            return item.fieldName;
          })
          : [];
      },
    },
    cusCheckAll: {
      get() {
        return this.checkCustomizeList.length == this.customizeList.length;
      },
      set(v) {
        this.checkCustomizeList = v
          ? this.customizeList.map((item) => {
            return item.fieldName;
          })
          : [];
      },
    },
  },
  data() {
    return {
      visible: false,
      checkSystemList: [],
      checkCustomizeList: [],
    };
  },
  watch: {
    visible(newVal, oldVal) {
      if (!newVal) {
        this.checkSystemList = checkSystemList_;
        this.checkCustomizeList = checkCustomizeList_;
      }
    },
  },
  mounted() {
    let obj_ = storageGet(PRODUCT_SEARCH_MODAL_COM_DATA);
    if (obj_) {
      obj_ = JSON.parse(obj_);
      this.checkSystemList = obj_.checkSystemList;
      this.checkCustomizeList = obj_.checkCustomizeList;
    }
  },
  methods: {
    onSubmit() {
      let rest_ = [];

      this.fields.forEach((item) => {
        if (this.checkSystemList.indexOf(item.fieldName) > -1) {
          rest_.push(item);
        }
        if (this.checkCustomizeList.indexOf(item.fieldName) > -1) {
          rest_.push(item);
        }
      });
      this.$emit("changeDiyFields", rest_);
      checkSystemList_ = this.checkSystemList;
      checkCustomizeList_ = this.checkCustomizeList;
      storageSet(
        PRODUCT_SEARCH_MODAL_COM_DATA,
        JSON.stringify({
          checkSystemList: this.checkSystemList,
          checkCustomizeList: this.checkCustomizeList,
          allCheckList: [...this.checkSystemList, ...this.checkCustomizeList],
        })
      );
      this.visible = false;
    },
    open() {
      this.visible = true;
    },
  },
};
</script>
<style lang="scss" scoped>
.task-search-content {
  padding-bottom: 100px;
}
.task-search-input {
  width: 276px;
}
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
.wh150 {
  min-width: 150px;
  width: auto;
}
</style>
